<template>
    <div v-if="userStore.userInfo.Id">
        <h3>会员列表</h3>
        登录名称:{{userStore.userInfo.UserName}}
        <input type="button" value="增加会员" @click="add" />
        <div>
            会员名称:<input type="text" v-model="que.userName" />
            会员等级:<select v-model="que.LevelId">
                <option value="">请选择</option>
                <option :value="item.Id" v-for="item in abcd.list">{{ item.LevelName }}</option>
            </select>
            <input type="button" value="查询" @click="getList" />
        </div>
        <table class="table table table-bordered">
            <tbody>
                <tr>
                    <td>ID</td>
                    <td>会员名称</td>
                    <td>会员电话</td>
                    <td>身份证</td>
                    <td>会员等级</td>
                    <td>积分</td>
                    <td>余额</td>
                    <td>生日</td>
                    <td>性别</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.UserName }}</td>
                    <td>{{ item.Phone.substring(0, 3) + "****" + item.Phone.substring(7) }}</td>
                    <td>{{ item.Card }}</td>
                    <td>
                        <span v-if="item.LevelId == 2">普通会员</span>
                        <span v-if="item.LevelId == 3">黄金会员</span>
                        <span v-if="item.LevelId == 4">白金会员</span>
                    </td>
                    <td>{{ item.Score }}</td>
                    <td style="color: red;">￥{{ item.Money.toFixed(2) }}</td>
                    <td>{{ moment(item.Birthday).format("YYYY-MM-DD HH:mm:ss") }}</td>
                    <td>{{ item.Sex == 1 ? "男" : "女" }}</td>
                    <td>{{ item.State == 1 ? "可用" : "禁用" }}</td>
                    <td>
                        <input type="button" value="修改" @click="update(item.Id)" class="btn btn-danger" />
                        <input type="button" value="删除" @click="del(item.Id)" class="btn btn-danger" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>您还没登录
        <input type="button" value="登录" @click="lo">
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
import { useUserStore } from '../stores/user';
const router = useRouter();

const userStore=useUserStore();
const lo:any=()=>{
    router.push("/")
}
let que: any = reactive({
    userName: '',
    LevelId: '',
});

let data: any = reactive({
    list: [],
});
let abcd: any = reactive({
    list: [],
})
//----------------------生命周期
onMounted(() => {
    getList();
    xlk();
})
//----------------------函数

const del = (id: any) => {
    //1.提示
    let f = confirm('确定要删除');

    if (f == true) {
        //2.删除
        axios({
            method: 'delete',
            url: '/api/Member/DelMember',
            params: { id: id }
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert("删除成功");
                    getList();
                }
                else {
                    alert("删除失败");
                    return;
                }
            })
            .catch((err) => {
                console.log(err);
            });
    }
}
//修改跳转
const update=(id:any)=>{
    router.push({
        path:'/memberupdate',
        query:{id:id}
    });
}

const add = () => {
    router.push("/memberadd")
}


const getList = () => {
    axios({
        method: 'get',
        url: '/api/Member/showMember',
        params: que
    })
        .then((res) => {
            console.log(res);
            data.list = res.data;
        })
        .catch((err) => {
            console.log(err);
        });
}

const xlk = () => {
    axios({
        method: 'get',
        url: '/api/Member/show'
    })
        .then((res) => {
            console.log(res);
            abcd.list = res.data;
        })
        .catch((err) => {
            console.log(err);
        });
}
</script>

<style scoped>
input[type='button'] {
    margin-left: 10px;
}
</style>